import { GlobalOutlined, TeamOutlined } from "@ant-design/icons";
import { Form, Input, Layout, Tree } from "antd";
import { useEffect, useReducer } from "react";
import client from '../../utils/client';
import tree from '../../utils/tree';
import CardTable from "../CardTable";
import org_styles from './organization.module.css';

const TYPE_DEPT = 1;

export default function OrgPosition(props) {
  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'loaded':
        return {
          ...state,
          tree: action.tree,
          defaultExpandedKeys: action.tree.map(d => d.key),
          selected: null,
        };
      case 'select':
        return { ...state, selected: action.selected };
      default:
        return state;
    }
  }, {
    tree: [],
    defaultExpandedKeys: [],
    selected: null,
  });

  useEffect(() => {
    client.job('TreeR', {
      Card: 'B.组织机构',
      Model: ['名称', '编码', '机构类型', '序号', '上级'],
      Filter: [{ or: [['上级', 'is', null], ['上级', '=', '']] }],
      Order: { '序号': 'asc' },
      Parent: '上级',
    }).then(({ Rows }) => {
      dispatch({
        type: 'loaded',
        tree: tree.map(Rows, item => ({
          key: item.ID,
          title: item.名称,
          icon: item.机构类型 === TYPE_DEPT ? <TeamOutlined /> : <GlobalOutlined />,
          data: item,
        })),
      });
    });
  }, []);

  return (
    <Layout style={{ minWidth: 600 }}>
      <Layout.Sider width={300}>
        <Tree blockNode showIcon rootClassName={org_styles.tree}
          treeData={state.tree} defaultExpandedKeys={state.defaultExpandedKeys}
          selectedKeys={!state.selected ? [] : [state.selected.key]}
          onSelect={(_, { selectedNodes }) => dispatch({ type: 'select', selected: selectedNodes[0] })}
        />
      </Layout.Sider>
      <Layout.Content style={{ padding: 5 }}>
        <CardTable name="岗位" parent={state.selected ? state.selected.data : null}
          filter={{
            labelCol: 6,
            items: [
              <Form.Item label="编码" name="编码">
                <Input allowClear={true} autoComplete="off" />
              </Form.Item>,
              <Form.Item label="名称" name="名称">
                <Input allowClear={true} autoComplete="off" />
              </Form.Item>,
            ]
          }}
          form={{
            items: [
              <Form.Item name="编码" label="编码">
                <Input allowClear={true} autoComplete="off" placeholder="可自动生成" />
              </Form.Item>,
              <Form.Item name="名称" label="名称" rules={[{ required: true }]}>
                <Input allowClear={true} autoComplete="off" />
              </Form.Item>,
              <Form.Item name="描述" label="描述">
                <Input allowClear={true} autoComplete="off" />
              </Form.Item>,
            ]
          }}
          table={{
            columns: [{
              title: '编码',
              dataIndex: '编码',
              width: 100,
              sorter: true,
            }, {
              title: '名称',
              dataIndex: '名称',
              width: 300,
              sorter: true,
            }, {
              title: '描述',
              dataIndex: '描述',
            }]
          }}
          doQuery={(filter, order, pageSize, pageNo) => client.job('CardR', {
            Card: 'B.岗位',
            Model: ['名称', '编码', '描述', '部门'],
            Filter: [['部门', '=', state.selected ? state.selected.key : null], ...filter],
            Order: order,
            PageSize: pageSize,
            PageNo: pageNo,
          })}
          doSave={!state.selected ? null : record => {
            record.部门 = record.部门 || state.selected.key;
            return client.job('CardW', {
              Card: 'B.岗位',
              Model: ['名称', '编码', '描述', '部门'],
              Record: record,
            });
          }}
          doDelete={record => client.job('CardD', {
            Card: 'B.岗位',
            Record: record,
          })}
          doExport={(filter, order) => client.export_xls('B.CardRExport', {
            Card: 'B.岗位',
            Model: ['名称', '编码', '描述', '部门'],
            Filter: filter,
            Order: order,
          })}
          doImport={() => client.import('B.CardWImport', {
            Card: 'B.岗位',
            Model: ['名称', '编码', '描述', '部门'],
          })}
        />
      </Layout.Content>
    </Layout>

  )
}